<#escape x as x?html>
<div class="nav-tabs-custom nav-fusion no-border no-shadow">
    <ul class="nav nav-tabs">
        <li class="active">
            <div href="#tabAppOverallCallTotal" data-toggle="tab">
                <@s.message "smp.resource.fact.called.total"/></div>
        </li>
        <li>
            <div id="appOverallCallTimesTitle" href="#tabAppOverallCallTimes" data-toggle="tab">
                应用调用次数趋势图
            </div>
        </li>
        <li>
            <div id="appOverallCallDataSizeTitle" href="#tabAppOverallCallDataSize" data-toggle="tab">
                应用调用数据量趋势图
            </div>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tabAppOverallCallTotal">
            <div class="row">
                <div class="col-md-4" id="appOverallCallCostTimeTotal"></div>
                <div class="col-md-4" id="appOverallCallDataSizeTotal"></div>
                <div class="col-md-4" id="appOverallCallSuccessRateTotal"></div>
            </div>
            <div class="row">
                <div class="col-md-12 col-lg-12" id="appOverallCallTotalChart"></div>
            </div>
        </div>
        <div class="tab-pane" id="tabAppOverallCallTimes">
            <div class="row" id="appOverallCallTimes">
                <div class="col-md-3 col-lg-4">
                    <div id="appOverallCallTimesTree" class="fancytree-default"></div>
                </div>
                <div class="col-md-9 col-lg-8 resource-row">
                    <div class="row">
                        <div class="col-md-4" id="appOverallCallCostTimeTimes"></div>
                        <div class="col-md-4" id="appOverallCallDataSizeTimes"></div>
                        <div class="col-md-4" id="appOverallCallSuccessRateTimes"></div>
                    </div>
                    <div class="row">
                        <div id="appOverallCallTimesChart">
                            <div class="row" style="height:100px;">
                            </div>
                            <div class="row">
                                <div class="col-lg-5">
                                </div>
                                <div class="col-lg-2">
                                    <@s.message "smp.resource.fact.called.times.tooltip"/>
                                </div>
                                <div class="col-lg-5">
                                </div>
                            </div>
                            <div class="row"
                                 style="height:250px;background:url('/assets/img/bg_box.png');background-position: center;background-repeat:no-repeat;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tabAppOverallCallDataSize">
            <div class="row" id="appOverallCallDataSize" style="color: #779ecd;color: #c82a20">
                <div class="col-md-3 col-lg-4">
                    <div id="appOverallCallDataSizeTree" class="fancytree-default"></div>
                </div>
                <div class="col-md-9 col-lg-8 resource-row2">
                    <div class="row">
                        <div class="col-md-4" id="appOverallCallCostTimeDataSize"></div>
                        <div class="col-md-4" id="appOverallCallDataSizeDataSize"></div>
                        <div class="col-md-4" id="appOverallCallSuccessRateDataSize"></div>
                    </div>
                    <div class="row">
                        <div id="appOverallCallDataSizeChart">
                            <div class="row" style="height:100px;">
                            </div>
                            <div class="row">
                                <div class="col-lg-5">
                                </div>
                                <div class="col-lg-2">
                                    <@s.message "smp.resource.fact.called.dataSize.tooltip"/>
                                </div>
                                <div class="col-lg-5">
                                </div>
                            </div>
                            <div class="row" style="height:250px;background:url('/assets/img/bg_box.png');
            background-position: center;background-repeat:no-repeat;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        context.call([
            "core",
            "appStatistics",
            "jQueryFancyTree",
            "echarts"
        ], function (core, appStatistics, jQueryFancyTree, echarts) {
//            core.setWidth("#factCalledTotalChart", ".tab-content");
            core.setHeight("#appOverallCallTotalChart", ".tab-content");
            core.setHeight("#appOverallCallTimesChart", ".resource-row2");
            core.setHeight("#appOverallCallDataSizeChart", ".resource-row");

            var basePath = "/app/statistics";

            appStatistics.callTimesTotalBar("appOverallCallTotalChart", core.getUrl(basePath + "/rest/callTimesTotalBarData"));

            var tree = $("#appOverallCallTimesTree").fancytree({
                selectMode: 2,
                source: {url: core.getUrl(basePath + "/rest/apptree"), debugDelay: 100},
                icon: function (event, data) {
                    return core.getUrl('/assets/img/tree/resource.png');//"fa fa-hdd-o";
                },
                click: function (event, data) {
                    var id = data.node.key;
                    appStatistics.callTimesLine("appOverallCallTimesChart", id);
                    /*                    ajaxResourceOverview(core.getUrl(basePath + "/rest/appCalledOverview/"
                                                + id), "Times");*/
                }
            });
            //添加默认空线图
            $("#appOverallCallTimesTitle").on("click", function () {
                appStatistics.callTimesLine("appOverallCallTimesChart", "11");
            });


            $("#appOverallCallDataSizeTree").fancytree({
                selectMode: 2,
                source: {url: core.getUrl(basePath + "/rest/apptree"), debugDelay: 100},
                icon: function (event, data) {
                    return core.getUrl('/assets/img/tree/resource.png');//"fa fa-hdd-o";
                },
                click: function (event, data) {
                    var id = data.node.key;
                    appStatistics.callDataSizeLine("appOverallCallDataSizeChart", id);
/*                    ajaxResourceOverview(core.getUrl(basePath + "/rest/appCalledOverview/"
                            + id), "DataSize");*/
                }
            });
            //添加默认空线图
            $("#appOverallCallDataSizeTitle").on("click", function () {
                appStatistics.callDataSizeLine("appOverallCallDataSizeChart", "11");
            });

            function widget(selector, options) {
                function appendLi(title, content, css) {
                    if (css == undefined) css = "bg-blue";
                    return '<li><a href="#">' + title + '<span class="pull-right badge ' + css + '">'
                            + content + '</span></a></li>';
                }

                var html = '<div class="box box-widget widget-info no-border no-shadow">' +
                        '<div class="widget-header text-center " style="background-color: #4f677a">' +
                        '<h3 class="widget-title" style="color: #ffffff;font-family:微软雅黑">' + options.title + '</h3>' +
                        '</div>' +
                        '<div class="box-footer no-padding">' +
                        '<ul class="nav nav-stacked nav-info">';

                for (var i = 0; i < options.data.length; i++) {
                    var record = options.data[i];
                    html += appendLi(record.title, record.content, record.css);
                }

                html += '</ul>' +
                        '</div>' +
                        '</div>';

                $(selector).html(html);
            }

            function ajaxResourceOverview(url, suffix) {
                $.ajax({
                    url: url,
                    success: function (dd) {
                        var data = JSON.parse(dd);

                        widget("#appOverallCallCostTime" + suffix, {
                            title: "调用总览",
                            data: [{
                                title: "最大时间", content: data.maxCostTime + "&nbsp;ms", css: "bg-red"
                            }, {
                                title: "最小时间", content: data.minCostTime + "&nbsp;ms", css: "bg-green"
                            }, {
                                title: "平均时间", content: data.avgCostTime + "&nbsp;ms", css: "bg-aqua"
                            }]
                        });
                        widget("#appOverallCallDataSize" + suffix, {
                            title: "数据大小",
                            data: [{
                                title: "最大数据量", content: data.maxDataSize + "&nbsp;kb", css: "bg-yellow"
                            }, {
                                title: "最小数据量", content: data.minDataSize + "&nbsp;kb", css: "bg-purple"
                            }, {
                                title: "平均数据量", content: data.avgDataSize + "&nbsp;kb", css: "bg-aqua"
                            }]
                        });
                        widget("#appOverallCallSuccessRate" + suffix, {
                            title: "成功率",
                            data: [{
                                title: "成功次数", content: data.successTimes, css: "bg-green"
                            }, {
                                title: "失败次数", content: data.failureTimes, css: "bg-red"
                            }, {
                                title: "成功率", content: data.successRate + "%", css: "bg-aqua"
                            }]
                        });
                    }
                })
            }

            ajaxResourceOverview(core.getUrl(basePath + "/rest/appCalledOverview/all"), "Total");
        });

    </script>
</#escape>